<template>
	<view class="page">
		<!-- 设备信息卡片 -->
		<view class="card">
			<view class="row">
				<text class="label">项目：</text>
				<text class="value">{{ device.project_name || '未绑定' }} /
					{{ device.area_name1 }}{{ device.area_name2 }}</text>
			</view>
			<view class="row">
				<text class="label">电量：</text>
				<text class="value">{{ device.battery }}%</text>
				<text class="label ml">信号强度：</text>
				<text class="value">{{ device.signal_strength }}%</text>
			</view>
			<view class="row">
				<text class="label">设备编号：</text>
				<text class="value">{{ device.code }}</text>
			</view>
			<view class="row">
				<text class="label">SIM卡号：</text>
				<text class="value">{{ device.pn }}</text>
			</view>
			<view class="row" v-if="device.lnglat">
				<text class="label">经度：</text>
				<text class="value">{{ device.lnglat.split(',')[0] }}</text>
				<text class="label ml">纬度：</text>
				<text class="value">{{ device.lnglat.split(',')[1] }}</text>
			</view>
			<view class="row">
				<text class="label">备注：</text>
				<text class="value">{{ device.content || '' }}</text>
			</view>
			<view class="row">
				<text class="label">更新时间：</text>
				<text class="value">{{ device.checktime || '' }}</text>
			</view>

			<!-- 状态显示 -->
			<view class="status-box">
				<image :src="device.status === '1'
						? 'https://yun.qiongtuyule.com/static/icons/warning.png'
						: 'https://yun.qiongtuyule.com/static/icons/checkmark.png'" style="width:18px; height:18px;" />
				<text :class="device.status === '1' ? 'status abnormal' : 'status normal'">
					{{ device.status === '1' ? '异常' : '正常' }}
				</text>
			</view>
		</view>

		<!-- 照片 -->
		<view class="card">
			<image v-if="device.images" class="photo" :src="device.images" mode="widthFix"></image>
			<text v-else class="empty-photo">暂无图片</text>
		</view>

		

		<!-- 上传图标 -->
		<view class="card">
			<fileUploader :limitsize="10240" :maxcount="1" @get-img="getImg" v-if="createModal"></fileUploader>
			<view class="btn-box">
				<button class="btn upload" @click="uploadImage">更新图片</button>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="card btn-box">
			<button v-if="device.project_name" class="btn unbind" @click="unbindDevice">解绑设备</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',
				createModal: true,
				device: {},
				projectId: null
			};
		},
		onLoad(options) {
			this.projectId = options.projectId;
			this.fetchProjectInfo();
		},
		methods: {
			// 获取设备详情
			async fetchProjectInfo() {
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.deviceDetail,
					data: {
						device_id: this.projectId
					},
					needLogin: true
				});
				if (res.code === 1 && res.data) {
					this.device = res.data;
				}
			},
			// 解绑设备
			async unbindDevice() {
				uni.showModal({
					title: '提示',
					content: '确定要解绑该设备吗？',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$lib.$http.post({
								url: this.$lib.$urlMap.deviceUnbind,
								data: {
									device_id: this.projectId
								},
								needLogin: true
							});
							if (result.code === 1) {
								uni.showToast({
									title: '解绑成功',
									icon: 'success'
								});
								this.device.project_name = '';
								this.device.status = 'unbind';
								uni.switchTab({
									url:'/pages/shouye/index'
								})
							} else {
								uni.showToast({
									title: result.msg || '解绑失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			getImg(data) {
				this.imgUrl = data[0];
			},
			// 上传图片
			async uploadImage() {
				console.log(222)
				const updateRes = await this.$lib.$http.post({
					url: this.$lib.$urlMap.deviceUpdate,
					data: {
						device_id: this.projectId,
						images: this.imgUrl
					},
					needLogin: true
				});
				if (updateRes.code === 1) {
					this.device.images = this.imgUrl;
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
					// this.fetchProjectInfo();
				} else {
					uni.showToast({
						title: updateRes.msg || '保存失败',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.page {
		background: #f7f7f7;
		min-height: 100vh;
	}

	.card {
		background: #fff;
		margin: 12px;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.label {
		color: #666;
	}

	.value {
		color: #000;
		margin-right: 10px;
	}

	.ml {
		margin-left: 20px;
	}

	.status-box {
		position: absolute;
		top: 18px;
		right: 20px;
		display: flex;
		align-items: center;
	}

	.status {
		font-weight: bold;
		margin-left: 4px;
	}

	.status.abnormal {
		color: #e74c3c;
	}

	.status.normal {
		color: #27ae60;
	}

	.photo {
		width: 100%;
		border-radius: 8px;
		margin-top: 10px;
	}

	.empty-photo {
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 20px 0;
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
	}

	.btn {
		flex: 1;
		margin: 0 5px;
		padding: 10px 0;
		border-radius: 8px;
		color: #fff;
		font-size: 16px;
	}

	.btn.unbind {
		background: #e74c3c;
	}

	.btn.upload {
		background: #3498db;
	}
</style>